<template>
  <div class="application" :style="{backgroundImage:`url(${bg})`}">
    <div class="top-title">{{pageData.Greetings}}</div>
    <div v-if="pageData.banner && pageData.banner.length > 0" class="swiper banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in pageData.banner" :key="index">
          <img :src="item" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="content" :class="[pageData.banner && pageData.banner.length > 0 ? 'have' : '']">
      <div class="screen-list-box">
        <div class="screen-list" v-show="screenShow" :class="{fixedon: scrollTop > elementATop}" ref="elementA">
          <div class="swiper swiperNav">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in screenList" :key="index">
                <span :class="[screenIdx === index ? 'on' : '']" class="screen-item" @click="changeScreenIdx(index)">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="header-search">
          <icon name="local-icon-search" size="18px" color="#333" />
          <el-input placeholder="" v-model="keywords" class="text" @keydown="searchFun"></el-input>
        </div>
      </div>
      <div class="swiper swiperCon">
        <div class="swiper-wrapper">
          <!-- 幻灯片项 -->
          <div class="swiper-slide"  v-for="(items, index) in screenList" :key="index">
            <el-row :gutter="bodyW < 640 ? 10 : 20" class="list">
              <div class="form-tips" style="padding: 20px; text-align: center; width: 100%;" v-if="items.list.length === 0">暂无相关数据~</div>
              <el-col v-for="(item, idx) in items.list" :key="idx" :span="12" :xs="12" :md="12" :lg="8">
                <div @click="toLink(`/product/list?id=${item.id}&pid=${item.parent_id}`)" class="item">
                  <div class="div flex-1">
                    <div class="name">
                      <div v-if="!item.logoimage_full" class="icon" :style="{background: colors[idx].text, color: '#fff'}">{{item.name.slice(0, 1)}}</div>
                      <div v-else class="icon"><img :src="item.logoimage_full" alt=""></div>
                      <div class="flex-1 text-line">{{item.name}}</div>
                    </div>
                    <div class="intro text-line">{{item.intro}}</div>
                  </div>
                  <div v-if="!item.logoimage_full" class="icon" :style="{background: colors[idx].text, color: '#fff'}">{{item.name.slice(0, 1)}}</div>
                  <div v-else class="icon"><img :src="item.logoimage_full" alt=""></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
  <zb-ai-suport />
</template>
<script lang="ts" setup name="Product">
  import { ref, reactive, onMounted} from 'vue';
  import { categoryApi } from '@/api/app';
  import bg from '@/assets/images/w-bg.png'
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';


  import { colors, isMobile } from '@/utils/util'
  import { useAppStore } from '@/stores/app'
  import { linkToPath } from '@/utils/weChat'
  import { useRouter } from 'vue-router';
  const router = useRouter()
  const toLink = (path:string) => {
    if( linkToPath(path) ){
      router.push(path);
    }
  }
  // tab切换
  const swiperAInstance = ref<any>(null);
  const swiperBInstance = ref<any>(null);
  // 点击切换导航标签
  const screenIdx = ref(0);
  const changeScreenIdx = (index: number) => {
    screenIdx.value = index;
    if (swiperBInstance.value) {
      swiperBInstance.value.slideTo(index);
    }
  };
  const watchSwiperB = () => {
    screenIdx.value = swiperBInstance.value.activeIndex;
    if (swiperAInstance.value) {
      swiperAInstance.value.slideTo(screenIdx.value);
    }
  }
  // 搜索
  const keywords = ref('');
  const screenShow = ref(true)
  const searchFun = (event:any) => {
    // 处理 keydown 事件
    console.log('event.key-====', event.key)
    // 检查是否按下了 Ctrl + Enter
    if (event.key === 'Enter') {
      screenIdx.value = 0;
      watchSwiperB()
      getCon()
    } 
    
  }

  const bodyW = window.innerWidth
  
  // 筛选栏数据
  const pageData = reactive({
    banner:[],
    Greetings:""
  })
  const screenList = ref<{id:number, name:string, list:{ id: number, parent_id: number, logoimage_full: string, name:string, intro:string }[]}[]>([])
  const getCon = async () => {
    await categoryApi({search:keywords.value}).then((res:any)=>{
      if(keywords.value){
        let ls:any = [];
        res.data.forEach((n:any) => {
          ls.push(...n.list)
        })
        screenList.value = [{list:ls, id:0, name:''}];
        console.log('screenList.value---', screenList.value)
      }else{
        screenList.value = [ ...res.data];
      }
      
      screenShow.value = keywords.value && keywords.value.length > 0 ? false : true;
      pageData.banner = isMobile && useAppStore().getWebsite.mobilebanner ? useAppStore().getWebsite.mobilebanner : res.bannerimages;
      pageData.Greetings = res.Greetings;
    })
  }
  
  
  const elementA = ref<HTMLElement | null>(null);
  const scrollTop = ref(0);
  const elementATop = ref(0)
  


  onMounted(async () => {
    await getCon();
    swiperAInstance.value = new Swiper('.swiperNav', {
      slidesPerView: 'auto',
    });

    swiperBInstance.value = new Swiper('.swiperCon', {
      slidesPerView: 'auto',
    });
    swiperBInstance.value.on('slideChange', watchSwiperB);

    const swiperBanner = new Swiper('.banner', {
      slidesPerView: 1,
      pagination: {
        el: '.swiper-pagination',
      },
    });
    console.log('swiperBanner initialized:', swiperBanner);
  });
</script>
<style lang="scss" scoped>
.top-title{font-size: 18px; margin-bottom: 20px;}
.banner{
  width: 100%; overflow:hidden;border-radius: 16px; margin-bottom: 35px;
  img{display: block; width: 100%;border-radius: 16px; }
  .swiper-pagination-bullet{
    background-color: rgba(255,255,255,0.78); opacity: 1;
    &.swiper-pagination-bullet-active{width: 30px; border-radius: 6px;}
  }
}
.swiperCon{
  width: 100%;
  .swiper-slide{
    height: 0px !important;
    &.swiper-slide-active{height:auto !important}
  }
}
// 表单搜索
.screen-list-box{
  position: relative; padding-right: 460px; margin-bottom: 25px;
  .header-search{
    position: absolute; right: 20px; top:50%; transform: translateY(-50%); border: 1px solid #E5E5E5;
    width: 214px; height: 34px; border-radius: 34px; margin-right: 10px;
    :deep(.local-icon){position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index:4}
    :deep(.el-input__wrapper){box-shadow: none; background-color: transparent;}
    :deep(.el-input__wrapper){padding-left: 35px;}
  }
}
.screen-list{
  display: flex; align-items: center;
  .swiper{
    margin: 0;
    .swiper-slide{width: auto !important; margin-right: 12px;}
  }
}

.screen-item{
  display: flex; align-items: center; justify-content: center;border-radius: 13px; height: 42px; cursor: pointer; padding:0 20px; overflow: hidden; background-color: #F7F7F7;outline: none; 
  &.on{background-color: var(--el-color-primary); color: #fff;}
}
.application{
  background-color:var(--el-bg-color); overflow: hidden; padding: 20px; background-position:right bottom; background-repeat: no-repeat;
  min-height: 100%; 
  .list{
    height: auto;
    .item{padding:26px; background-color:rgb(249 ,250 ,251,0.85); margin-bottom:20px; border-radius: 12px; height:120px; display:flex; align-items:center; cursor: pointer;}
    .name{
      font-size:18px; display: flex; align-items: center; line-height: 1; margin-bottom: 6px;
      .icon{margin-right: 0.2rem; display:none}
    }
    .intro{line-height:1.6; color:var(--el-color-info); -webkit-line-clamp: 2;}
    .icon{
      width:60px; height:60px; border-radius: 18px; background-color:var(--el-color-primary-light-9); display:flex; align-items:center; justify-content:center; font-size:32px;  color:var(--el-color-primary); margin-left:47px; font-weight:bold;
      img{width: 100%; height: 100%; display: block;}
    }
  }
}


@media only screen and (max-width: 992px){
  .application{
    
    .list{
      .icon{width:60px; height:60px; border-radius: 10px;  margin-left:20px; font-size:26px;}
    }
  }
  
}

$iconH: 34px;
$bannerH:2.8rem;
$appTop:0.3rem;
$screenH: 1.4rem;
$hvH: calc(var(--vh, 1vh) * 100);
@media only screen and (max-width: 769px){
  .banner{ margin-bottom: 0.32rem !important; }
  .top-title{display: none;}
  .screen-list-box{
    padding-right: 0; margin-bottom: 0.32rem;
    .header-search{
      display: block; position: fixed; right: var(--wap-pad); top:30px; z-index:var(--zindex1); margin-right: 0; width: 30%; background-color: #F7F7F7; 
    }
  }
  
  .application{
    background-image: none !important; border-radius: 0; padding:$appTop 0 var(--bottomH) 0;
    .list{
      padding:0 var(--wap-pad);
      .item{padding:0.24rem; height:2.16rem; margin:0 0 0.22rem 0; position: relative; border-radius: 0.32rem; align-items: flex-start; background-color: #F7F7F7;}
      .name{
        font-size:0.34rem; margin-bottom:0px; line-height: $iconH; margin-top: 0.02rem; font-weight: bold;
        .icon{display:flex}
      }
      .intro{margin-top: 6px; line-height: 1.4; color: var(--el-text-color-placeholder);}
      .icon{
        font-size:16px; width:$iconH; height:$iconH; margin-left:0; border-radius:0.24rem; width:0.68rem; height:0.7rem; font-size:0.34rem; display: none;
      }
    }
    .content{padding:0px}
  }
  .swiper-slide{
    border-radius: 0.24rem;
    &:active{background-color: transparent;}
  }
  .screen-item{
    font-size:0.3rem; border-radius: 0.24rem; background-color: transparent; border:1px solid #EBEBEB; padding: 0 0.24rem; height: 0.68rem;;
    &.on{border: none;}
  }
  .screen-list{
    padding: 0;
    &.fixedon{position: fixed; top:60px; background-color: #fff; z-index:90}
    .swiper{
      padding:0 var(--wap-pad);
    }
  }
  
  .banner{
    margin: 0 var(--wap-pad); width: calc(100% - var(--wap-pad) * 2); border-radius: 0.32rem;
    img{width: 100%; height:$bannerH; object-fit: cover; border-radius: 0.32rem;}
    .swiper-pagination-bullet{
      width: 0.2rem; height: 0.2rem;
      &.swiper-pagination-bullet-active{width: 0.4rem; border-radius: 0.1rem;}
    }
  }
  .content{
    .swiperCon{
      .swiper-slide{
        height:0px;
        &.swiper-slide-active{min-height:calc( $hvH - var(--headerH) - $bannerH - var(--bottomH) - $screenH - $appTop )}
      }
    }
  }
  
}
</style>